<template>
  <div>
    <button @click="addWarehouse" style="margin-top: 10px">➕ 新增仓库</button>
    <!-- 仓库列表 -->
    <div class="warehouseCard" v-for="(item, index) in allWarehouseLocal" :key="[item.warehouseId]"
         :class="['warehouse-item', { active: index === nowWarehouse }]">
      <h3>仓库: {{ item.warehouse || '未命名仓库' }} - 服务: {{ item.service || '未命名服务' }}</h3>
      <!-- 分支选择器 -->
      <div class="card_foot">
        <select v-model="item.selectedBranch" style="width: 200px;margin-left: 10px">
          <option v-if="item.gitBranch.length === 0" disabled>暂无分支</option>
          <option v-for="branch in item.gitBranch" :key="branch" :value="branch">
            {{ branch }}
          </option>
        </select>

        <!-- 切换服务按钮 -->
        <button @click="switchService(item)" style="margin-right: 50px">切换服务</button>
      </div>

    </div>
    <a-modal
      title="初始化仓库"
      :visible="initWarehouseDialogVisible"
      @ok="initWarehouseOk"
      @cancel="initWarehouseCancel"
      style="color: black"
    >
      <a-input addon-before="仓库名" v-model="tempWareHouse.warehouse" placeholder="仓库名" />
      <a-input addon-before="服务名" v-model="tempWareHouse.service" placeholder="服务名" />
      <a-input addon-before="分支名" v-model="tempWareHouse.selectedBranch" placeholder="分支名" />
    </a-modal>

    <!-- 新增仓库按钮 -->

  </div>
</template>

<script>
import { eventBus } from '@/eventBus';
import md5 from 'js-md5';
export default {
  name: "Warehouse",
  data(){
    return{
      initWarehouseDialogVisible: false,
      tempWareHouse: {
        warehouseId: '',
        warehouse: '',
        service: '',
        gitBranch: [], // 记录分支
        selectedBranch: ''
      },
    }
  },
  computed: {
    allWarehouse() {
      console.log('computed');
      return this.$store.state.globals.allWarehouse;
    },
    nowWarehouse(){
      return this.$store.state.globals.nowWarehouse;
    },
    allWarehouseLocal:{
      get(){
        return JSON.parse(JSON.stringify(this.$store.state.globals.allWarehouse));
      }
    }

  },
  methods: {
    switchService(item) {
      const _list = this.allWarehouse
      const targetIndex = _list.findIndex(w => w.warehouseId === item.warehouseId);
      this.$store.dispatch('globals/setNowWarehouse',targetIndex);
      this.$store.dispatch('globals/change_now_gitBranch',item.selectedBranch);
      eventBus.$emit('change-warehouse');
      console.log('switch');
      console.log(item);

    },
    addWarehouse() {
      this.resetTempWareHouse();
      this.initWarehouseDialogVisible = true;
    },
    initWarehouseOk(){
      this.tempWareHouse.gitBranch.push(this.tempWareHouse.selectedBranch);

      this.tempWareHouse.warehouseId = md5(this.tempWareHouse.warehouse + this.tempWareHouse.service);
      console.log('typeof allWarehouse[0].id');
      console.log(typeof this.allWarehouse[0].warehouseId);
      console.log(this.tempWareHouse);
      this.$store.dispatch('globals/AddWarehouse',this.tempWareHouse );
      this.initWarehouseDialogVisible = false;
      console.log('this.$store.state.globals.allWarehouse');
      console.log(this.$store.state.globals.allWarehouse);
      console.log('yanz');
      console.log(this.allWarehouse === this.$store.state.globals.allWarehouse);

    },
    initWarehouseCancel(){
      this.initWarehouseDialogVisible = false;
    },
    resetTempWareHouse(){
      this.tempWareHouse = {
        warehouseId: '',
        warehouse: '',
        service: '',
        gitBranch: [], // 记录分支
        selectedBranch: ''
      }
    }
  },
created() {

}
}
</script>
<style scoped>
.warehouseCard{
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.card_foot{
  display: flex;
  justify-content: space-between;
}
.warehouse-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 8px;
}

.warehouse-item.active {
  border-color: #42b983;
  background-color: #f0f9eb;
}

button {
  margin-top: 5px;
  padding: 6px 12px;
  background-color: #42b983;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}
button:hover {
  background-color: #369d72;
}
</style>
